<template>

  <el-container class="custom-container">
    <!-- 顶部导航栏 -->
    <el-header class="custom-top-header">
      <div class="header-left">系统管理平台</div>
      <div class="header-right">
        <el-dropdown trigger="click" @command="handleCommand">
          <div class="user-info">
            <img
                :src="user.avatar"
                class="user-avatar"
                alt="用户头像"
            />
            <span class="user-name">{{ user.username }}</span>
            <i class="el-icon-arrow-down"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <i class="el-icon-user"></i>个人中心
            </el-dropdown-item>
            <el-dropdown-item command="logout">
              <i class="el-icon-switch-button"></i>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="220px" class="custom-aside">
        <!-- <el-menu router> 可以再index属性中直接写路由 -->
        <el-menu
            :default-openeds="['1']"
            default-active="0"
            background-color="#2d3a4b"
            text-color="#fff"
            active-text-color="#409eff"
        >
          <el-menu-item index="0">
            <template>
              <i class="el-icon-menu"></i>
              <router-link to="/admin/" tag="span">首页</router-link>
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/admin/user" tag="span">用户管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">角色管理</el-menu-item>
              <el-menu-item index="1-3">日志管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主内容区域 -->
      <el-main class="custom-main">
        <!-- 路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {mapState} from "vuex";
import {logout} from "@/api/user";

export default {
  name: "AdminView",
  data() {
    return {};
  },
  computed: {
    ...mapState(['user'])
  }
  ,
  methods: {
    // 处理下拉菜单命令
    handleCommand(command) {
      if (command === 'center') {
        // 跳转到个人中心逻辑
        console.log('进入个人中心')
      } else if (command === 'logout') {
        // 退出登录逻辑
        console.log('退出登录')
        this.$message.info('退出登录');
        logout().then(res => {
          // 退出之前,清空vuex
          this.$store.commit('saveUserInfo', null)
          // 到登录页面
          this.$router.push("/")
        })
      }
    }
  },
};
</script>

<style scoped>
/* 整体容器 */
.custom-container {
  height: 100vh;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.custom-top-header {
  background-color: #2d3a4b;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-left {
  font-size: 18px;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  margin-right: 5px;
}

/* 侧边栏 */
.custom-aside {
  background-color: #2d3a4b;
  color: #fff;
  padding-top: 20px;
}

.el-menu {
  padding-left: 0 !important; /* 去除 el-menu 的左内边距 */
}

.el-submenu__title {
  padding-left: 20px !important;
}

.el-menu-item {
  padding-left: 20px !important;
}

/* 主内容区 */
.custom-main {
  background-color: #f3f3f4;
  color: #333;
  flex: 1;
}
</style>